<template>
	<a-select v-model="value" class="select-wrapper" @change="valueChangeHandle" >
		<a-select-option v-for="item of options" :key="item.id" :value="item.id">
			{{ item.name }}
		</a-select-option>
	</a-select>
</template>

<script>
import { getPanelData } from '@/api/modules/SelectOrgApi';

export default {
	name: 'businessAccountList',
	props: {
		accountId: {
			type: [String, Number],
			require: true
		},
		panel: {
			type: String,
			require: true
		}
	},
	data() {
		return {
			selectValue: this.value,
			options: []
		};
	},
	computed: {
		value: {
			get() {
				if(this.options && this.options.length){
					return this.$attrs.value || null;
				}else{
					return '';
				}

			},
			set: function (selectval) {
				this.$emit('input', selectval);
			}
		}
	},
	watch: {
		accountId(value) {
			if (value) {
				this.getOptions();
			}
		}
	},
	mounted() {
		this.getOptions();
	},
	methods: {
		async getOptions() {
			const { code, data, message } = await getPanelData({
				panel: this.panel,
				command: 'businessAccountList',
				arguments: {
					accountId: this.accountId
				}
			});
			if (String(code) === '0') {
				this.options = data;
				if (data && data.length > 0) {
					this.value = data[0].id;
				} else {
					this.value = '';
				}
			} else {
				this.$message.warning(message);
			}
		},
		valueChangeHandle(value) {
			this.$emit('change', value);
		}
	}
};
</script>

<style lang="scss" scoped></style>
